<!DOCTYPE html>
{% extends 'layout/base.html' %}
{% load static %}
{% block title %} 漏洞结果 {% endblock %}
{% block css %}
    <!--Bootsrap Table-->
    <style>
        #toolbar {
          margin: 0;
        }
        /*修复分页next按钮布局*/
       .page-item.page-next, .page-item.page-prev{
           flex: 0 0 auto;
       }
    </style>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-table/bootstrap-table.min.css' %}">

{% endblock %}

{% block contents %}
    <div class="container-xl " >
        <div class="row row-deck" >
            <div class="col-lg-12">
              <div class="card" >
                <div class="card-header ">
                  <h3 class="card-title text-muted" >漏洞详情</h3>
                </div>
                <div class="card-body">
                    <div class="table-responsive" id="refresh">
                    <table class="table text-center" id="table"
                      data-toggle="table"
                      data-show-export="true"
                      data-click-to-select="true"
                      data-toolbar="#toolbar"
                      data-search="true"
                      data-show-refresh="true"
                      data-auto-refresh="true"
                      data-show-toggle="true"
                      data-show-fullscreen="true"
                      data-show-columns="true"
                      data-show-columns-toggle-all="true"
                      data-minimum-count-columns="2"
                      data-show-pagination-switch="true"
                      data-pagination="true"
                      data-id-field="id"
                      data-page-list="[10, 25, 50, 100, all]"
                      data-response-handler="responseHandler">
                        <thead class="table-primary">
                            <tr>
                                <th data-sortable="true" data-field="id">ID</th>
                                <th data-sortable="true" data-field="status">等级</th>
                                <th data-sortable="true" data-field="target">扫描目标</th>
                                <th data-sortable="true" data-field="vuln_name">漏洞类型</th>
                                <th data-sortable="true" data-field="time">处理时间</th>
{#                                <th data-sortable="true" data-field="vuln">漏洞</th>#}
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in data %}
                                <tr>
                                <td >{{ item.id }}</td>
                                    {% if item.severity == 3 %}
                                         <td>
                                            <a class="btn bg-red-lt btn-block">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-biohazard" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><circle cx="12" cy="12" r="2"></circle><path d="M11.939 14c0 .173 .048 .351 .056 .533l0 .217a4.75 4.75 0 0 1 -4.533 4.745l-.217 0m-4.75 -4.75a4.75 4.75 0 0 1 7.737 -3.693m6.513 8.443a4.75 4.75 0 0 1 -4.69 -5.503l-.06 0m1.764 -2.944a4.75 4.75 0 0 1 7.731 3.477l0 .217m-11.195 -3.813a4.75 4.75 0 0 1 -1.828 -7.624l.164 -.172m6.718 0a4.75 4.75 0 0 1 -1.665 7.798"></path></svg>
                                                {{ item.severity }}
                                             </a>
                                        </td>
                                    {% elif item.severity == 2 %}
                                           <td>
                                            <a class="btn bg-pink-lt btn-block">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-virus" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><circle cx="12" cy="12" r="5"></circle><path d="M12 7v-4m-1 0h2"></path><path d="M12 7v-4m-1 0h2" transform="rotate(45 12 12)"></path><path d="M12 7v-4m-1 0h2" transform="rotate(90 12 12)"></path><path d="M12 7v-4m-1 0h2" transform="rotate(135 12 12)"></path><path d="M12 7v-4m-1 0h2" transform="rotate(180 12 12)"></path><path d="M12 7v-4m-1 0h2" transform="rotate(225 12 12)"></path><path d="M12 7v-4m-1 0h2" transform="rotate(270 12 12)"></path><path d="M12 7v-4m-1 0h2" transform="rotate(315 12 12)"></path></svg>
                                                {{ item.severity }}
                                             </a>
                                        </td>
                                    {% elif item.severity == 1 %}
                                           <td>
                                            <a class="btn bg-azure-lt btn-block">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-radioactive" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M13.5 14.6l3 5.19a9 9 0 0 0 4.5 -7.79h-6a3 3 0 0 1 -1.5 2.6"></path><path d="M13.5 9.4l3 -5.19a9 9 0 0 0 -9 0l3 5.19a3 3 0 0 1 3 0"></path><path d="M10.5 14.6l-3 5.19a9 9 0 0 1 -4.5 -7.79h6a3 3 0 0 0 1.5 2.6"></path></svg>
                                                {{ item.severity }}
                                             </a>
                                        </td>
                                    {% else %}
                                        <td>
                                            <a class="btn bg-green-lt btn-block">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-triangle" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 9v2m0 4v.01"></path><path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75"></path></svg>
{#                                                 <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="60" height="60" viewBox="0 0 24 24" stroke-width="1.5" stroke="green" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="9" /><path d="M9 12l2 2l4 -4" /></svg>#}
                                                {{ item.severity }}
                                             </a>
                                        </td>
                                    {% endif %}
                                    <td style="text-align: left;"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg><a href="/vuln_detail/{{ item.vuln_id }}"> {{ item.target }}</a></td>
                                    <td ><a class="btn bg-blue-lt btn-block">{{ item.vuln_name }}</a></td>
                                    <td ><span class="text-muted" >{{ item.time }}</span></td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                </div>
              </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <!--Bootsrap Table-->
    <script src="{% static 'plugins/bootstrap-table/bootstrap-table.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-table/bootstrap-table-zh-CN.js' %}"></script>
    <script src="{% static 'js/jquery.min.js' %}"></script>


    <!-- 消息弹层组件 依赖jquery -->
    <script src="{% static 'layer/layer.js' %}"></script>
    <!-- 点击查询按钮页面向下滑到底部 依赖jquery -->
    <script type="text/javascript">
        jQuery(document).ready(function($){
            $('.scan-btn').click(function(){$('html,body').animate({scrollTop:$('.footer').offset().top}, 100);}); //100ms
        });
    </script>
    <!-- 回车键查询按钮触发 依赖jquery -->
    <script type="text/javascript">
            $(document).keydown(function(event) {
                    if (event.keyCode == 13) {
                        $(".scan-btn").click();
                    }
                });
        </script>
{% endblock %}